<template>
  <div class="wrap">
    <input type="text" class="form-control" v-model="value">
    <button class="btn" type="button" @click="handleAdd">添加</button>
  </div>
</template>


<!-- <script setup> 
import { ref, defineExpose } from 'vue';

const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')

const handleAdd = () => {
  list.value.push(value.value)
  value.value = ''
}
// <script setup>写法会导致整个组件实例无法暴露出来，父组件无法通过ref获取到子组件的实例
defineExpose({ list })  
</script>
-->

<script>
import { ref } from 'vue';
export default {
  setup() {
    const list = ref(['JavaScript', 'HTML', 'CSS'])
    const value = ref('')

    const handleAdd = () => {
      list.value.push(value.value)
      value.value = ''
    }

    return {
      list,
      value,
      handleAdd
    }
  }
}
</script>

<style>

</style>